'use strict';
var React = require('react');
/*// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/line');
// 引入提示框，标题，图例组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/dataZoom');*/

//分模块使用坑爹的ie8无法支持，只能如此
var echarts=require('echarts');

class HkfslineMap extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        if (this.props.width !== undefined) {
            this.refs.HkfslineMap.style.width = this.props.width;
        }
        if (this.props.height !== undefined) {
            this.refs.HkfslineMap.style.height = this.props.height;
        }

        var date = [];
        var data = [];
        var dataContent=this.props.data;
        for (var i = 1; i < dataContent.length; i++) {
            date.push(dataContent[i].date);
            data.push(dataContent[i].nav);
        }

    var myChart = echarts.init(this.refs.HkfslineMap);

        var option = {
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: date
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    lineStyle: {
                        color: '#f2f7f9'
                    }
                }
            },
            dataZoom: [{
                type: 'inside',
                start: 0,
                end: 100
            }, {
                start: 0,
                end: 10,
                handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '80%',
                handleStyle: {
                    color: '#fff',
                    shadowBlur: 3,
                    shadowColor: 'rgba(0, 0, 0, 0.6)',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                }
            }],
            series: [
                {
                    name:' 最新净值 ',
                    type:'line',
                    symbol: 'none',
                    sampling: 'average',
                    itemStyle: {
                        normal: {
                            color: 'rgb(64, 169, 221)'
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(64, 169, 221)'
                            }, {
                                offset: 1,
                                color: 'rgb(255, 255, 255)'
                            }])
                        }
                    },
                    data: data
                }
            ]
        };
        myChart.setOption(option);
    }

    render() {
        return (
            <div className="HkfslineMap" ref="HkfslineMap">
            </div>
        )
    }
}


HkfslineMap.propTypes = {
    width: React.PropTypes.string,
    height: React.PropTypes.string
};

HkfslineMap.defaultProps = {
    width: '100%',
    height: '500px'
};

module.exports=HkfslineMap;